﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Questions.aspx.cs" Inherits="Corsat.Web._2013.Administration.Questions" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .progressBackgroundFilter
        {
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            overflow: hidden;
            padding: 0;
            margin-left: auto;
            margin-right: auto;
            background-color: #000;
            filter: alpha(opacity=50);
            opacity: 0.5;
            z-index: 1000;
        }
        
        .processMessage
        {
            margin-left: auto;
            margin-right: auto;
            position: fixed;
            top: 30%;
            left: 43%;
            padding: 10px;
            width: 14%;
            z-index: 1001;
            background-color: #fff;
            border: solid 1px #000;
            text-align: center;
            font-size: large;
            font-style: oblique;
        }
        
        .rdoBtn label
        {
            display: inline-block;
        }
    </style>
    <link href="../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="../libs/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">

        function addAnswers() {
            var html = '<div class="answerClass">' +
                ' <input type="checkbox" style="margin-left:30px" > <input type="text" style="width: 82%" > ' +
                ' <a type="button" onclick="removeAnswers(this);" style="color: white;margin-bottom:9px" class="icon-remove" text="save" id="Button1"></a></div>';
            $("#txtAnswers").append(html);
        }

        function removeAnswers(element) {
            $(element).parent().remove();
            /* var html = '<div class="answerClass">' +
            ' <input type="checkbox" style="margin-left:30px" > <input type="text" style="width: 77%" > ' +
            ' <a type="button" onclick="addAnswers();" style="color: white;margin-bottom:9px" class="icon-remove" text="save" id="Button1"></a></div>';
            $("#txtAnswers").append(html);*/
        }

        function openModal(questionId) {

            if (!$('#<% Response.Write(hdnSelectedCourseId.ClientID); %>').val()) {
                alert('لابد من اختيار كورس و مستوى');
                return;
            }

            $('#example').modal('show');

            if (questionId == 0) {
                $("#txtQuestion").val('');
                $("#hdnQuestionId").val(questionId);
                $('#txtAnswers div').remove();
                var courseId = $('#<% Response.Write(hdnSelectedCourseId.ClientID); %>');
                $("#hdnCourseId").val(courseId.val());

                return;
            }

            $.ajax({
                type: "POST",
                url: "Questions.aspx/GetDate",
                data: '{"questionId":' + questionId + ' }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $("#txtQuestion").val(msg.d.Text);
                    $("#hdnCourseId").val(msg.d.CourseId);
                    $("#hdnQuestionId").val(msg.d.questionId);
                    $('#ddlLevel').val(msg.d.QuestionLevelId);
                    //data = $.parseJSON(data);
                    $('#txtAnswers div').remove();
                    $.each(msg.d.Answers, function (i, item) {
                        var html = '<div class="answerClass"> <input type="checkbox" style="margin-left:30px" checked="checked"> <input type="text" name="answer_' +
                            item.AnswerText + '" id="answer_' + item.AnswerId + '" value="' + item.AnswerText + '" style="width: 82%" >' +
                ' <a type="button" onclick="removeAnswers(this);" style="color: white;margin-bottom:9px" class="icon-remove" text="save" id="Button1"></a></div>';
                        if (!item.IsRightAnswer) {
                            html = html.replace('checked="checked"', "");
                        }
                        $("#txtAnswers").append(html);
                    });
                }
            });

        }

        function saveQuestion() {
            var kat = [];
            var sd = $(".answerClass");
            if (!$("#txtQuestion").val()) {
                alert('لابد من إدخال سؤال');
                return;
            }
            if (!$("#ddlLevel").val()) {
                alert('لابد من اختيار مستوى');
                return;
            }
            var hasRightAnswer = false;
            $.each(sd, function (i, item) {

                var ans = { "AnswerId": 2, "AnswerText": item.children[1].value, "IsRightAnswer": item.children[0].checked };
                if (!hasRightAnswer) {
                    hasRightAnswer = item.children[0].checked;
                }
                kat.push(ans);
            });
            if (kat.length < 2) {
                alert('لابد من إدخال أكثر من إجابة');
                return;
            }
            if (!hasRightAnswer) {
                alert('لابد من اختيار إجابة صحيحة');
                return;
            }
            var question = {
                "QuestionId": $("#hdnQuestionId").val(),
                "QuestionLevelId": $('#ddlLevel').val(),
                "CourseId": $("#hdnCourseId").val(),
                "Text": $("#txtQuestion").val(),
                "Answers": kat
            };
            $.ajax({
                type: "POST",
                url: "Questions.aspx/Save",
                data: JSON.stringify({ question: question }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //                    $("#<% Response.Write(btnLoad.ClientID); %>").click();
                    $('#example').modal('hide');
                    __doPostBack('btnLoad', '');
                    return;
                    $("#txtQuestion").val(msg.d.Text);
                    //data = $.parseJSON(data);
                    $('#txtAnswers input[type="text"]').remove();
                    $.each(msg.d.Answers, function (i, item) {
                        var html = '<input type="checkbox" checked="checked"> <input type="text" name="answer_' +
                            item.AnswerText + '" id="answer_' + item.AnswerId + '" value="' + item.AnswerText + '" style="width: 93%" >';
                        if (!item.IsRightAnswer) {
                            html = html.replace('checked="checked"', "");
                        }
                        $("#txtAnswers").append(html);
                    });
                }
            });
        }



        function deleteQuestion(questionId) {
            if (confirm("تأكيد الحذف")) {
                $.ajax({
                    type: "POST",
                    url: "Questions.aspx/DeleteQuestion",
                    data: '{"questionId":' + questionId + ' }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d.result) {
                            alert('تم الحذف بنجاح');
                            __doPostBack('btnLoad', '');
                        }
                    }
                });
            }

        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="formScriptManager" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdateProgress ID="UpdateProgress2" runat="server">
            <ProgressTemplate>
                <div class="progressBackgroundFilter">
                </div>
                <div class="processMessage">
                    جارى التحميل...<br />
                    <br />
                    <img alt="Loading..." src="~/Images/Loading.gif" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <table align="center" width="900px">
            <tr>
                <td>
                    <asp:Panel ID="pnlChooseCourse" runat="server" GroupingText="إختيار كورس" Font-Bold="False"
                        Font-Size="Large" Direction="RightToLeft">
                        <table width="100%" dir="rtl">
                            <tr>
                                <td style="width: 40%">
                                    <asp:Panel runat="server" ID="pnlCourseName" GroupingText="الكورس" Height="100%">
                                        <asp:DropDownList ID="ddlCourseNames" runat="server" Width="100%" OnSelectedIndexChanged="ddlCourseNames_SelectedIndexChanged"
                                            AutoPostBack="true" Style="font-size: large; margin-right: 0px">
                                        </asp:DropDownList>
                                    </asp:Panel>
                                </td>
                                <td style="width: 40%">
                                    <asp:UpdatePanel ID="upCourseLevels" runat="server">
                                        <ContentTemplate>
                                            <asp:Panel ID="pnlCourseLevels" runat="server" GroupingText="المستوى">
                                                <asp:RadioButtonList ID="rdoLevel" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical"
                                                    AutoPostBack="true" OnSelectedIndexChanged="rdoLevel_SelectedIndexChanged" CssClass="rdoBtn">
                                                </asp:RadioButtonList>
                                                <asp:HiddenField runat="server" ID="hdnSelectedCourseId" />
                                            </asp:Panel>
                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="ddlCourseNames" EventName="SelectedIndexChanged" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <asp:LinkButton ID="btnLoad" runat="server" Text="تــــحـــمــــيــــل" Font-Size="Large"
                                        Font-Bold="true" OnClick="btnLoad_Click"></asp:LinkButton>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td>
                    <a class="btn btn-primary btn-large" onclick="openModal('0')" style="color: white">إضافة
                        سؤال جديد </a>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:Panel ID="pnlAccountsInCourse" runat="server" GroupingText="الأسئلة" Font-Size="Large">
                                <table align="center">
                                    <tr>
                                        <td>
                                            <asp:GridView ID="grdQuestions" runat="server" AutoGenerateColumns="False" BackColor="#CCCCCC"
                                                BorderColor="#999999" BorderStyle="Solid" BorderWidth="2px" CellPadding="4" CellSpacing="2"
                                                EnableModelValidation="True">
                                                <Columns>
                                                    <%-- <asp:TemplateField>
                                                        <ItemTemplate>
                                                            <asp:HiddenField ID="hdnAccountId" runat="server" Value="<%# Bind('QuestionId') %>" />
                                                        </ItemTemplate>
                                                    </asp:TemplateField>--%>
                                                    <asp:BoundField HeaderText="السؤال" DataField="QuestionText" ItemStyle-HorizontalAlign="Center"
                                                        ItemStyle-Font-Size="Large" ItemStyle-Font-Bold="true"></asp:BoundField>
                                                    <asp:BoundField HeaderText="المحاضرة" DataField="QuestionLevelId" ItemStyle-HorizontalAlign="Center"
                                                        ItemStyle-Font-Size="Large" ItemStyle-Font-Bold="true"></asp:BoundField>
                                                    <%-- <asp:BoundField HeaderText="الإسم" DataField="ArabicName" ItemStyle-HorizontalAlign="Center"
                                                        ItemStyle-Font-Size="Large" ItemStyle-Font-Bold="true">
                                                        <ItemStyle Width="500px" />
                                                    </asp:BoundField>--%>
                                                    <asp:TemplateField HeaderText="تعديل">
                                                        <ItemTemplate>
                                                            <a class="btn btn-primary btn-large" onclick="openModal('<%# Eval("QuestionId") %>')"
                                                                style="color: white">تعديل </a>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField HeaderText="حذف سؤال">
                                                        <ItemTemplate>
                                                            <a class="btn btn-danger btn-large" onclick="deleteQuestion('<%# Eval("QuestionId") %>')"
                                                                style="color: white">حذف </a>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <FooterStyle BackColor="#CCCCCC" />
                                                <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                                                <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
                                                <RowStyle BackColor="White" />
                                                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                            </asp:GridView>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <hr />
                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnLoad" EventName="Click" />
                            <asp:AsyncPostBackTrigger ControlID="ddlCourseNames" EventName="SelectedIndexChanged" />
                            <asp:AsyncPostBackTrigger ControlID="rdoLevel" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </div>
    <div class="container">
        <div id="example" class="modal hide fade in">
            <div class="modal-header" dir="rtl">
                <a class="close" data-dismiss="modal" style="float: left">×</a>
                <h3>
                    السؤال</h3>
            </div>
            <div class="modal-body" dir="rtl">
                <input type="hidden" id="hdnCourseId"></input>
                <input type="hidden" id="hdnQuestionId"></input>
                <table style="width: 100%">
                    <tr>
                        <td>
                            السؤال
                        </td>
                        <td>
                            <input type="text" id="txtQuestion" style="width: 98%"></input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            المحاضرة
                        </td>
                        <td>
                            <select id="ddlLevel">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            الإجابات
                        </td>
                        <td>
                            <a type="button" onclick="addAnswers();" style="color: white" class="btn btn-primary"
                                text="save" id="Button1">+</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <strong>(الأختيار الصحيح / الأجابة)</strong>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <div id="txtAnswers">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <a type="button" id="btnSearch" text="save" class="btn btn-primary" style="color: white"
                    onclick="saveQuestion()">حفظ</a>
                <%--    <a href="#" class="btn btn-primary" style="color: white">Call to action</a> --%>
                <a href="#" class="btn" data-dismiss="modal">إغلاق</a>
            </div>
        </div>
        <p>
    </div>
    </form>
</body>
</html>
